// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
const staticOption = {
  color: ['#298eff'],
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      name: 'tree2',
      orient: 'RL',
      data: [],
      top: '5%',
      left: '15%',
      bottom: '2%',
      right: '80%',
      symbolSize: 7,
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      leaves: {
        label: {
          normal: {
            position: 'left',
            offset: [-50, 0],
            color: '#d9e7ff',
            fontSize: 18
          }
        }
      },
      lineStyle: {
        color: '#834bf6',
        opacity: 0.3
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    },
    {
      type: 'tree',
      name: 'tree1',
      data: [],
      top: '5%',
      left: '43%',
      bottom: '2%',
      right: '28%',
      symbolSize: 7,
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          fontSize: 18,
          color: '#d9e7ff'
        }
      },
      lineStyle: {
        color: '#834bf6',
        opacity: 0.3
      },
      leaves: {
        label: {
          normal: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        }
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
}

const staticOptionHuge = {
  color: ['#298eff'],
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      name: 'tree2',
      orient: 'RL',
      data: [],
      top: '5%',
      left: '15%',
      bottom: '2%',
      right: '80%',
      symbolSize: 7,
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      leaves: {
        label: {
          normal: {
            position: 'left',
            offset: [-50, 0],
            color: '#d9e7ff',
            fontSize: 18
          }
        }
      },
      lineStyle: {
        color: '#298eff',
        opacity: 0.3
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    },
    {
      type: 'tree',
      name: 'tree1',
      data: [
        {
          name: '嘉兴市智慧教育公共服务平台',
          label: {
            fontSize: 18,
            align: 'center',
            color: '#d9e7ff',
            offset: [-60, 0],
            formatter: (params) => {
              console.log(params)
              return `嘉兴市智慧教育\n公共服务平台`
            }
          },
          children: [
            {
              name: '户籍',
              label: {
                show: false
              },
              symbolSize: [100, 75],
              symbol: 'image:///static/weishidataview/images/hj.png',
              children: [
                {
                  name: '学期：10次'
                },
                {
                  name: '累计：12次'
                }
              ]
            },
            {
              name: '社保',
              symbolSize: [100, 75],
              symbol: 'image:///static/weishidataview/images/sb.png',
              children: [
                {
                  name: '学期：10次'
                },
                {
                  name: '累计：12次'
                }
              ]
            },
            {
              name: '房产',
              symbolSize: [100, 75],
              symbol: 'image:///static/weishidataview/images/fc.png',
              children: [
                {
                  name: '学期：10次'
                },
                {
                  name: '累计：12次'
                }
              ]
            }
          ]
        }
      ],
      top: '5%',
      left: '43%',
      bottom: '2%',
      right: '23%',
      symbolSize: 7,
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          fontSize: 18,
          color: '#bad3ff'
        }
      },
      lineStyle: {
        color: '#298eff',
        opacity: 0.3
      },
      leaves: {
        label: {
          normal: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        }
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
}

const staticOptionMid = {
  color: ['#298eff'],
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      name: 'tree2',
      orient: 'RL',
      data: [],
      top: '5%',
      left: '15%',
      bottom: '2%',
      right: '80%',
      symbolSize: 7,
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      leaves: {
        label: {
          normal: {
            position: 'left',
            offset: [-50, 0],
            color: '#d9e7ff',
            fontSize: 18
          }
        }
      },
      lineStyle: {
        color: '#298eff',
        opacity: 0.3
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    },
    {
      type: 'tree',
      name: 'tree1',
      data: [],
      top: '5%',
      left: '43%',
      bottom: '2%',
      right: '23%',
      symbolSize: 7,
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          fontSize: 18,
          color: '#bad3ff'
        }
      },
      lineStyle: {
        color: '#298eff',
        opacity: 0.3
      },
      leaves: {
        label: {
          normal: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        }
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
}

// 备选颜色，有需求则进行循环
// const colors = ['#0066ff', '#f16f3c', '#00ab47', '#df0050', '#394cff', '#702af2', '#8b0000', '#828e00', '#3700c4', '#730054']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen <= 1600) {
      this.option = staticOptionMid
    }
    if (screen >= 3656) {
      this.option = staticOptionHuge
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // 装配数据 必须使用箭头函数
    this.option.series[0].data = additionalOptions.leftTreeData
    this.option.series[1].data = additionalOptions.rightTreeData
    this.option.series[1].data[0].label.formatter = (params) => {
      return `{a|嘉兴市智慧教育\n公共服务平台}`
    }
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
    this.option.series[1].data = []
  }

  getOption () {
    return this.option
  }
}

export {ChartFactory}
